<!-- 论坛页面 -->
<template>
	<view id="body">
		<!-- 顶部导航 -->
		<view class="nav">
			<!-- 搜索 -->
			<view class="search"> 
				<u-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false" @search="search"></u-search>
			</view>
			<!-- 发布图标 -->
			<view class="fabu" @click="add"> 
				<text class="t-icon t-icon-fabu2" style="width: 52rpx;height: 52rpx;"></text>
			</view>
			<!-- 分类 -->
			<view class="type">
				<u-tabs :list="type" @click="fl" lineColor="#549BFF":inactiveStyle="{fontSize:'28rpx',}" :activeStyle="{fontSize:'28rpx'}"></u-tabs>
			</view>
		</view>
		<!-- 帖子 -->
		<view class="posting">
			<view class="posting-card" v-for="(item,index) in PostIndo" :key="index" @click="postcardchlick(index)">
				<!-- 用户头像 -->
				<view class="userImg">
					<image :src="item.issueUserImg" class="user-logo"></image>
				</view>
				<!-- 用户名称 -->
				<view class="user-name">
					<text>{{item.issueUserName}}</text>
				</view>
				<!-- 帖子分类 -->
				<view class="posting-type">
					<text class="type-text">{{type[item.type - 1].name}}</text>
				</view>
				<!-- 帖子时间 -->
				<view class="createTime">
					<text>{{item.createTime}}</text>
				</view>
				<!-- 帖子内容 -->
				<view class="content">
					<text>{{item.content}}</text>
				</view>
				<!-- 图片列表 -->
				<view class="imgList" v-for="(item1,index) in item.postIndeximg">
					<view class="imgview">
						<image v-if="index == 0 & item.postIndeximg.length == 1 " :src="item1" class="imgList-img"></image>
						<image v-if="index == 0 & item.postIndeximg.length > 1 " :src="item1" class="imgleftCss"></image> 
						<image :key="index" :src="item1" v-if="index != item.postIndeximg.length - 1 & index != 0" class="imgList-img"></image>
						<image v-if="item.postIndeximg.length > 1 & index == item.postIndeximg.length - 1 " :src="item1" class="imgrightCss"></image>
					</view>
				</view>
				<!-- 定位 -->
				<view class="dingwei">
					<view class="dingweitubiao">
						<text class="t-icon t-icon-dingwei" style="width: 40rpx;height: 40rpx;"></text>
					</view>
					<view class="dingweitext">
						<text v-if="item.location.length > 0">{{item.location}}</text>
						<text v-if="item.location.length == 0">暂无定位</text>
					</view>
					<!-- 点赞 -->
					<view class="dianzan">
						<text :class="item.dianzantb" style="width: 40rpx;height: 40rpx;" @click.stop="dianzanclick(item.id)"></text>
						<text class="dianzannum" v-if="item.dianzantb == 't-icon t-icon-dianzan-copy'" style="color: #3c9cff;">{{item.praisenum}}</text>
						<text class="dianzannum" v-if="item.dianzantb == 't-icon t-icon-dianzan'">{{item.praisenum}}</text>
					</view>
					<!-- 评论图标 -->
					<view class="comment">
						<text class="t-icon t-icon-pinglun" style="width: 40rpx;height: 40rpx;" @click.stop="commentclick(item.id)"></text>
						<text class="commentnum">{{item.commentnum}}</text>
					</view>
					<!-- 分享 -->
					<view class="share">
						<text class="t-icon t-icon-fenxiang2" style="width: 40rpx;height: 40rpx;" @click.stop="shareclick(item.id)"></text>
						<text class="sharenum">{{item.sharenum}}</text>
					</view>
				</view>
			<!-- 评论回复item.commentidlist != null & item.commentidlist.length > 0  -->
			<view class="comment-message" v-if="false">
				<!-- 水平线 -->
				<view class="line">
					<u-line color="#7d7e80"></u-line>
				</view>
				<!-- 评论内容文本 -->
				<view class="commentlist">
					<!-- 评论用户姓名 -->
					<text class="commentUserName">张三:</text>
					<text class="commenttext">累了就早点休息</text>
					<!-- 评论用户姓名 -->
					<view>
						<text class="commentUserName">张三</text>
						<text style="margin-left: 8rpx;">回复</text>
						<text style="margin-left: 8rpx; color:#3c9cff;">李四:</text>
						<text class="commenttext">累了就早点休息</text>
					</view>
				</view>
			</view>
			</view>
		</view>
		<!-- 评论模态框 -->
		<view>
			<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open" >
				<view class="ct">
					<view class="ctview">
						<input placeholder="评论内容" v-model="cttext" />
					</view>
					<view class="plbutton" @click="plbutton">
						<text style="line-height: 68rpx;">发布评论</text>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 加载动画 -->
		<view class="loading" >
			<u-loadmore :status="status" :line="line" :nomoreText="nomoreText" /> 
		</view>
	</view>
</template>

<script>
	import {http} from "../static/service/requestAddress/rtas.js"
	export default {
		data() {
			return {
				keyword:"",//搜索框内容
				type:[
					{
						name:"生活动态",
					},
					{
						name:"咨询求助",
					},
					{
						name:"校园活动",
					},
					{
						name:"好人好事",
					},
					{
						name:"黑榜",
					},
					{
						name:"其他",
					},
				],
				PostIndo:[],//帖子信数据数组
				dianzantb: "t-icon t-icon-dianzan",//点赞样式
				status:"loading",
				nomoreText:"——没有更多了——",
				show:false,
				commentclickId:"",//点击的帖子id
				cttext:"",//评论内容
				page:0,//分页数
				typenum:0,//切换订单类型下标
				ss:false,//是否是搜索标记
				ssnum:0,//搜索分页下标
				sskey:"",//上次搜索内容
			}
		},
		created() {
			//获取数据
			this.status = "loading"
			uni.request({
				url:http+"post/"+0+"/"+0,
				method:"GET",
				complete:(res) =>{
					if(res.data.code == 20021){
						//对数据进行处理
						var datalist = res.data.date
						if(datalist == [] | datalist.length == 0){
							this.PostIndo = datalist
							this.status = "nomore"
							this.page += 1
							return
						}
						for(var i = 0; i < datalist.length; i++){
							datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(" "))
							//对图片处理
							datalist[i].postIndeximg = JSON.parse(datalist[i].postIndeximg)
							//处理图标样式
							datalist[i].dianzantb = "t-icon t-icon-dianzan"
						}
						//对点赞图标进行处理
						var user = uni.getStorageSync('user')
						//验证用户是否登录
						if(user){
							var userid = JSON.parse(user).id
							for(var j = 0;j<datalist.length;j++){
								//判断用户点赞id集合是否为空
								if(datalist[j].praiseUseridlist != ""){
									var praiseList = datalist[j].praiseUseridlist.split(",")
									//去掉空串
									praiseList = praiseList.filter(b=>b && b.trim())
									var T = false
									for(var b = 0; b < praiseList.length;b++){
										//用户点赞集合里有该登录用户的id就改变图标样式
										if(praiseList[b] == ""+userid){
											//增加属性
											datalist[j].dianzantb = "t-icon t-icon-dianzan-copy"
											T = true
											break
										}
									}
									if(! T){
										datalist[j].dianzantb = "t-icon t-icon-dianzan"
									}
								}else{
									datalist[j].dianzantb = "t-icon t-icon-dianzan"
								}
							}
						}
						this.PostIndo = datalist
						this.status = "nomore"
						this.page += 1
					}
				}
			})
		},
		//上拉加载
		onReachBottom() {
			console.log("触发了上拉加载")
			this.status = "loading"
			var url = ""
			// 是搜索的下拉分页的情况
			if(this.ss){
				url = http+"post/search/"+this.keyword+"/"+this.typenum+"/"+this.ssnum
			}else{
				url = http+"post/"+this.typenum+"/"+this.page
			}
			uni.request({
				url:url,
				method:"GET",
				complete:(res) =>{
					if(res.data.code == 20021){
						if(res.data.date == "" & res.data.date.length <= 0){
							uni.$u.toast("没有更多了!")
						}
						var datalist = res.data.date
						//对数据进行处理
						var datalist = res.data.date
						for(var i = 0; i < datalist.length; i++){
							datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(" "))
							//对图片处理
							datalist[i].postIndeximg = JSON.parse(datalist[i].postIndeximg)
							//处理图标样式
							datalist[i].dianzantb = "t-icon t-icon-dianzan"
						}
						//对点赞图标进行处理
						var user = uni.getStorageSync('user')
						//验证用户是否登录
						if(user){
							var userid = JSON.parse(user).id
							for(var j = 0;j<datalist.length;j++){
								//判断用户点赞id集合是否为空
								if(datalist[j].praiseUseridlist != ""){
									var praiseList = datalist[j].praiseUseridlist.split(",")
									//去掉空串
									praiseList = praiseList.filter(b=>b && b.trim())
									var T = false
									for(var b = 0; b < praiseList.length;b++){
										//用户点赞集合里有该登录用户的id就改变图标样式
										if(praiseList[b] == ""+userid){
											//增加属性
											datalist[j].dianzantb = "t-icon t-icon-dianzan-copy"
											T = true
											break
										}
									}
									if(! T){
										datalist[j].dianzantb = "t-icon t-icon-dianzan"
									}
								}else{
									datalist[j].dianzantb = "t-icon t-icon-dianzan"
								}
							}
						}
						this.PostIndo = this.PostIndo.concat(datalist)
						this.status = "nomore"
						//增加分页值
						if(this.ss){
							this.ssnum += 1
						}else{
							//增加分页值
							if(res.data.date != null & res.data.date.length > 0){
								this.page += 1
							}
						}
					}else{
						uni.$u.toast("获取数据失败!")
					}
				}
			})
		},
		onShow(){
			console.log("进入了show")
		},  
		methods:{
			//搜过方法
			search(){
				if(this.keyword == "" | this.keyword.length  == 0){
					uni.$u.toast("搜索内容不能为空")
					return
				}
				this.PostIndo = []
				this.status = "loading"
				if(!this.ss){
					this.ss = true
				}
				//搜索内容不同时，重置页数
				if(this.keyword != this.sskey){
					this.sskey =this.keyword
					this.ssnum = 0
				}
				uni.request({
					url:http+"post/search/"+this.keyword+"/"+this.typenum+"/"+this.ssnum,
					method:"GET",
					complete:(res)=>{
						if(res.data.code == 20021){
							if(res.data.date == null){
								this.status = "nomore"
							}else{
								//对数据进行处理
								var datalist = res.data.date
								for(var i = 0; i < datalist.length; i++){
									datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(" "))
									//对图片处理
									datalist[i].postIndeximg = JSON.parse(datalist[i].postIndeximg)
									//处理图标样式
									datalist[i].dianzantb = "t-icon t-icon-dianzan"
								}
								//对点赞图标进行处理
								var user = uni.getStorageSync('user')
								//验证用户是否登录
								if(user){
									var userid = JSON.parse(user).id
									for(var j = 0;j<datalist.length;j++){
										//判断用户点赞id集合是否为空
										if(datalist[j].praiseUseridlist != ""){
											var praiseList = datalist[j].praiseUseridlist.split(",")
											//去掉空串
											praiseList = praiseList.filter(b=>b && b.trim())
											var T = false
											for(var b = 0; b < praiseList.length;b++){
												//用户点赞集合里有该登录用户的id就改变图标样式
												if(praiseList[b] == ""+userid){
													//增加属性
													datalist[j].dianzantb = "t-icon t-icon-dianzan-copy"
													T = true
													break
												}
											}
											if(! T){
												datalist[j].dianzantb = "t-icon t-icon-dianzan"
											}
										}else{
											datalist[j].dianzantb = "t-icon t-icon-dianzan"
										}
									}
								}
							}
							this.PostIndo = datalist
							this.status ="nomore"
							this.ssnum += 1
						}else{
							uni.$u.toast("获取内容失败!")
						}
					}
				})
			},
			//添加帖子
			add(){	
				console.log("点击了增加帖子")
				uni.navigateTo({
					url:"/forum/forumadd"
				})
			},
			//切换分类
			fl(item){
				console.log("点击了分类"+item.index)
				this.status = "loading"
				this.typenum = item.index
				this.ss = false 
				this.ssnum = 0
				this.PostIndo = []
				uni.request({
					url:http+"post/"+this.typenum+"/0",
					method:"GET",
					complete:(res) =>{
						if(res.data.code == 20021){
							if(res.data.date == null){
								this.status = "nomore"
								uni.$u.toast("没有更多了!")
							}else{
								//对数据进行处理
								var datalist = res.data.date
								for(var i = 0; i < datalist.length; i++){
									datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(" "))
									//对图片处理
									datalist[i].postIndeximg = JSON.parse(datalist[i].postIndeximg)
									//处理图标样式
									datalist[i].dianzantb = "t-icon t-icon-dianzan"
								}
								//对点赞图标进行处理
								var user = uni.getStorageSync('user')
								//验证用户是否登录
								if(user){
									var userid = JSON.parse(user).id
									for(var j = 0;j<datalist.length;j++){
										//判断用户点赞id集合是否为空
										if(datalist[j].praiseUseridlist != ""){
											var praiseList = datalist[j].praiseUseridlist.split(",")
											//去掉空串
											praiseList = praiseList.filter(b=>b && b.trim())
											var T = false
											for(var b = 0; b < praiseList.length;b++){
												//用户点赞集合里有该登录用户的id就改变图标样式
												if(praiseList[b] == ""+userid){
													//增加属性
													datalist[j].dianzantb = "t-icon t-icon-dianzan-copy"
													T = true
													break
												}
											}
											if(! T){
												datalist[j].dianzantb = "t-icon t-icon-dianzan"
											}
										}else{
											datalist[j].dianzantb = "t-icon t-icon-dianzan"
										}
									}
								}
								this.PostIndo = datalist
								this.status = "nomore"
								//重置分页值
								this.page = 1
						}
						}else{
							uni.$u.toast("获取数据失败!")
						}
					}
				})
			},
			//点击增加取消点赞
			dianzanclick(ids){
				//对用户登录进行判断
				var user = uni.getStorageSync('user')
				var userid = 0
				if(! user){
					uni.$u.toast("您还未登录，登录后才能点赞")
					return
				}else{
					userid = JSON.parse(user).id
				}
				var praiseList = []//用户点赞id集合
				var T = this.PostIndo
				var promise = new Promise(function(reslove,reject){
					for(var i = 0; i <T.length;i++){
						if(T[i].id == ids){  
							//获取redis中的点赞数量，移除对应的数据，此处如果是只访问本地的话数据会错
							uni.request({
								url:http+"post/commentNum/"+T[i].id,
								method:"GET",
								complete:(res)=>{
									if(res.data.code == 20021){
										if(res.data.date != "" & res.data.date.length > 0){
											praiseList = res.data.date.split(",")
											//去掉空串
											praiseList = praiseList.filter(b=>b && b.trim())
											reslove(praiseList.length)
										
									}else{
										reject(praiseList.length)
									}
								}
							}
						}) 
					}
					}
				})
				promise.then(res=>{
					var that = this
					var data = that.PostIndo
					//不是第一次点赞的情况
						//1.判断点赞用户集合中是否有自己的id，如果有就移除，同时更新数据
						for(var i = 0;i < praiseList.length;i++){
							if(praiseList[i] == userid){
								praiseList.splice(i,1)//移除对应用户id
									var T = ""
									if(praiseList == "" | praiseList.length == 0){
										T = "aaa"
									}else{
										T = praiseList.join(",")//转换成字符串
									}
									//更新数据库
									uni.request({
										url:http+"post/praise/"+T+"/"+praiseList.length+"/"+ids,
										method:"PUT",
										complete: (res) =>{
											if(res.data.code == 20041){
												for(var t = 0; t < data.length;t++){
													if(data[t].id == ids){
													that.PostIndo[t].praisenum -= 1
													that.PostIndo[t].praiseUseridlist = praiseList.join(",")
													that.dianzantb = "t-icon t-icon-dianzan"
													that.PostIndo[t].dianzantb = "t-icon t-icon-dianzan"
													that.PostIndo = that.PostIndo
													uni.$u.toast("点赞成功")
													return
													}
												}
											}else{
												uni.$u.toast("点赞失败")
											}
										}
									})
									return
							}
						}
						//2.如果点赞用户集合中没有自己的id，就增加，同时更新数据
						praiseList = praiseList.concat(""+userid)
						uni.request({
							url:http+"post/praise/"+praiseList.join(",")+"/"+praiseList.length+"/"+ids,
							method:"PUT",
							complete: (res) =>{
								if(res.data.code == 20041){
									for(var t = 0; t < data.length;t++){
										if(data[t].id == ids){
											that.PostIndo[t].praisenum += 1
											that.PostIndo[t].praiseUseridlist = praiseList.join(",")
											that.PostIndo[t].dianzantb = "t-icon t-icon-dianzan-copy"
											uni.$u.toast("点赞成功")
											return
										}
									}
								}else{
									uni.$u.toast("点赞失败")
								}
							}
						})
				}).catch(err=>{
					var that = this
					var data = that.PostIndo
					//当获取的用户点赞id数组为空时，说明是第一次点赞
					if( praiseList.length == 0){
						praiseList.push(""+userid+",")
						uni.request({
							url:http+"post/praise/"+praiseList[0]+"/"+1+"/"+ids,
							method:"PUT",
							complete: (res) =>{
								if(res.data.code == 20041){
									for(var t = 0; t < data.length;t++){
										if(data[t].id == ids){
											that.PostIndo[t].praisenum += 1
											that.PostIndo[t].praiseUseridlist = praiseList.join(",")
											that.PostIndo[t].dianzantb = "t-icon t-icon-dianzan-copy"
											uni.$u.toast("点赞成功")
											return
										}
									}
								}else{
									uni.$u.toast("点赞失败")
								}
							}
						})
					}
				})
			},
			//点击了评论回复
			commentclick(id){
				this.show = true
				this.commentclickId = id
			},
			//点击了分享图标
			shareclick(id){
				uni.$u.toast("管理员关闭了分享功能")
			},
			//点击了动态详情
			postcardchlick(index){
				uni.navigateTo({
					url:"/forum/info?data="+ JSON.stringify(this.PostIndo[index])
				})
			},
			//打开模态框
			open(){
				this.show = true
			},
			//关闭模态框
			close(){
				this.show = false
			},
			//发布评论
			plbutton(){
				uni.showLoading({
					title:"正在评论中",
					mask: true
				})
				var user = uni.getStorageSync('user')
				//验证用户是否登录
				if(! user){
					uni.$u.toast("您还未登录，登录才能发布订单")
					return
				}
				if(this.cttext == "" | this.cttext .length == 0){
					uni.$u.toast("评论内容不能为空")
				}
				var userid = JSON.parse(user).id
				var username = JSON.parse(user).name
				var userimg = JSON.parse(user).img
				var fistcommentdata = {
					"id":"",
					"content":this.cttext,
					"commentUserid":userid,
					"commentUsername":username,
					"commentUserimg":userimg,
					"answerIdlist":"",
					"belongpost":this.commentclickId,
					"state":0
				}
				uni.request({
					url:http+"fistcomment",
					method:"POST",
					data:fistcommentdata,
					complete:(res)=>{
						if(res.data.code == 20011){
							uni.$u.toast("评论成功!")
							for(var i = 0; i< this.PostIndo.length;i++){
								if(this.PostIndo[i].id == this.commentclickId){
									this.PostIndo[i].commentidlist += res.data.date.id +","
									this.PostIndo[i].commentnum += 1
									this.cttext = ""
									return
								}
							}
						}else{
							uni.$u.toast("评论失败!")
						}
					}
				})
				this.show = false
				uni.hideLoading()
			}
		}
	}
</script> 

<style>
	@import url("/static/css/componentsCss/forum/forumindex.css");
</style>